<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
        <el-form-item>
          <el-button @click="handleQuery">保存</el-button>
        </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <el-form :model="datas" label-width="100px">
        <el-form-item label="主题图片:">
          <div class="img_flex_c">
            <image-upload :isShowTip="false" showTipText="" :limit="5" v-model="datas.photoUrl"></image-upload>
          </div>
        </el-form-item>
    </el-form>
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>内容</span>
        </div>
      </template>
      <editor  ref="editors" v-model="datas.content" :min-height="500"/>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useRoute } from "vue-router";
import data from './data'
import { addarticle, eitHarticle, articleId  } from "@/api/article";
const { bill, datas } = data
datas.value = {
  status: '1',
  billingStatus: '1',
  accountTime: new Date(),
  setTime: new Date(),
  intro: '',
}
const { proxy } = getCurrentInstance();

const route: any = useRoute();
let proxys: any = proxy;
  const handleQuery = function():void {
    proxys.$refs.setUserSelect.submitForm().then((valid) => {
    (!route.query.id ? addarticle : eitHarticle)(valid).then(() => {
      proxys.$modal.msgSuccess(`${route.query.id ? "修改" : "新增"}成功`);
      Cancel();
    });
  });
  };
  const changeFun = function(e:any):void {
    // console.log(e)
  }

  const Cancel = () => {
    datas.value = {};
    const obj = { path: "/article/articleList" };
    proxys.$tab.closeOpenPage(obj);
  };
  route.query.id &&
  articleId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    res.data.setTime = res.data.publicTime
    datas.value = res.data;
    proxys.$refs.editors.setdata(datas.value.content)
  });
  !route.query.id && (datas.value = {});
</script>
<style scoped>
.pad_10 {
  padding: 10px;
}
.pad_10  .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>